Why is CSS ::first-letter not working?

Use your dev tools to inspect the code to check out the examples of where ::first-letter works and doesn't work.

Read the blog post View the code View the docs on MDN

CSS ::first-letter may have limited browser support: caniuse.com reports this pseudo element selector is not supported in Firefox, but Baseline reports that "This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩."

This paragraph is using the CSS ::first-letter pseudo element selector to style the first letter differently to the rest of the text. It works because the paragraph is set to display: block or inline-block.

The parent container is display: flex. The text has been formatted, because the element holding the text has been targeted, even though it is display: inline. However, the flex container sets this element to be a flex item, which is seemingly a block container. (Check the computed properties!)

css first-letter does not work on this span, because it is set to display: inline.

css first-letter does not work on this paragraph, because it is set to display: flex.

css first-letter does not work on this paragraph, because it is set to display: grid.

this text is preceded by a ::before pseudo-element, ::first-letter does not work.

this text is superceded by a ::after pseudo-element, ::first-letter does work!

attempting to cascade the ::first-letter styles from a parent element does not work!